<!DOCTYPE html>
<html>
<head>
	<title>行业占比分析</title>
	<meta charset="utf8">
	<script type="text/javascript" src="js/login.js"></script> 
	<script src="js/echarts.min.js"></script>
	<script src="js/jquery-2.2.3.min.js"></script>
	<script src="js/ip.js"></script>
	<style type="text/css" media="screen">
		body {
			background-image: url('./images/pie_back.jpg');
			width: 100%;
			height: 100%;
			background-repeat:no-repeat ;
			background-size:100% 100%;
			background-attachment: fixed;
		}
		#container{
			height: 90%;
			width: 50%;
			left: 25%;
			right: 25%;
			position: absolute;
			border: 1px solid black;
			margin-top: 2%;
			margin-bottom: 10%;
			background-color: #ffffff;
			
		}
		#chartContainer{
			width: 80%;
			height: 60%;
			margin-left: 10%;
		}
		#page_title{
			margin-top: 10%;
			margin-bottom: 5%;
			height: 10%;
			width: 80%;
			margin-left: 10%
		}
		#page_title p{
			font-size: 40px;
		}
	</style>
	<script type="text/javascript">
		function showChart(dataToShow){
			var myChart = echarts.init(document.getElementById('chartContainer'));
			var option = {
				backgroundColor: '#2c343c',

				title: {
					text: '行业占比分析',
					left: 'center',
					top: 20,
					textStyle: {
						color: '#ccc'
					}
				},

				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},

				visualMap: {
					show: false,
					min: 80,
					max: 600,
					inRange: {

					}
				},
				series : [
				{
					name:'职位类别',
					type:'pie',
					radius : '55%',
					center: ['50%', '50%'],
					data:dataToShow.sort(function (a, b) { return a.value - b.value; }),
					roseType: 'radius',
					label: {
						normal: {
							textStyle: {
								color: 'rgba(255, 255, 255, 0.3)'
							}
						}
					},
					labelLine: {
						normal: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.3)'
							},
							smooth: 0.2,
							length: 10,
							length2: 20
						}
					},
					itemStyle: {
						normal: {
							color: function(params) {
                                    //自定义颜色
                                    var colorList = [          
                                    '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },

                        animationType: 'scale',
                        animationEasing: 'elasticOut',
                        animationDelay: function (idx) {
                        	return Math.random() * 200;
                        }
                    }
                    ]
                };
                myChart.setOption(option);
            }
        </script>
    </head>
    <body>
    	<div id="container">
    		<div id="page_title">
    			<div id="page_title_text" class="text ">
    				<p><span></span>
    					<span>行业占比分析</span>
    					<span><img src="./images/timg.gif"></span>
    				</p>
    			</div>
    		</div>
    		<div id="chartContainer" >
    			<script type="text/javascript">
    				var data=[
    				{value:335, name:'直接访问'},
    				{value:310, name:'邮件营销'},
    				{value:274, name:'联盟广告'},
    				{value:235, name:'视频广告'},
    				{value:400, name:'搜索引擎'}
    				];
    				window.onload=function(){
    					$.ajax({
    						"url":defaultIp+"/proanaly",
    						"type":"get",
    						"dataType":"json",
    						"success":function(result){
				            //show
				            //bug to fix; error in sort function 
				            showChart(result);
				        },
				        "error":function(result){
				        	console.log(result);
				        	showChart(data);
				            //alert("获取数据失败!");
				        }
				    });
    				}
    			</script>
    		</div>
    	</div>
    </body>
    </html>